<template>
    <!--数字选择框  -->
    <div class="mui-numbox" data-numbox-min='1' style="height:28px;">
      <button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
      <input ref="numbox" class="mui-input-numbox" type="number" value="1" @change="sendCount"/>
      <button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
    </div>
</template>


<script>
// 引入mui的js脚本文件（给数字框添加事件）
import mui from "../../lib/mui/js/mui.min.js"

export default {
  data() {
    return {

    }
  },
  methods: {
    sendCount() {
      // 通过ref属性获取数字框元素中的值
      var num = this.$refs.numbox.value;
      // console.log(num);
      // 触发父组件的getCount事件，将num传过去
      this.$emit("getCount",num)
    }
  },
  props:["maxnum"],
  // 当组件挂载到DOM上之后，初始化 numberbox
  mounted() {
    mui('.mui-numbox').numbox();
    // console.log(this.maxnum);
  },
  // 一进入获取不到最大值，必须在监听中得到最大值的库存量
  watch: {
    maxnum(newVal) {
      mui('.mui-numbox').numbox().setOption('max', newVal);
    }  
  }

}
</script>


<style lang = "scss" scoped >

</style>